﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,Chaome=1" />
	<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes" />
	<title>头像裁剪上传</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" />

</head>
<body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/cropbox.js"></script>
<div class="container">
  <div class="imageBox">
    <div class="thumbBox"></div>
    <div class="spinner" style="display: none">Loading...</div>
  </div>
  <div class="action">
    <!-- <input type="file" id="file" style=" width: 200px">-->
    <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
      <label for="upload-file">上传</label>
      </a>
      <input type="file" class="" name="upload-file" id="upload-file" />
    </div>
    <input type="button" id="btnCrop"  class="Btnsty_peyton" value="裁切">
    <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
    <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
  </div>
</div>
<script type="text/javascript">
var options = {
	thumbBox: '.thumbBox',
	spinner: '.spinner',
	imgSrc: 'images/avatar.png',
    imageBox: document.querySelector('.imageBox')
};
var cropper = cropbox(options);
document.querySelector('#upload-file').onchange = function(){
    var reader = new FileReader();
	reader.onload = function(e) {
		options.imgSrc = e.target.result;
		cropper = cropbox(options);
	};
	reader.readAsDataURL(this.files[0]);
}

document.querySelector('#btnCrop').onclick = function(){
	var img = cropper.getDataURL();
	//document.querySelector('.cropped').innerHTML = '';
	//		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
	//		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
	//document.querySelector('.cropped').innerHTML = '<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>';
	var str=img.split("base64,")[1];
	$.post('./upload.php',{imgBase64:img},function(msg){
		if(msg){
			location='./merge.php';
		}
	})
};

document.querySelector('#btnZoomIn').onclick = function() {
    cropper.zoomIn();
}

document.querySelector('#btnZoomOut').onclick = function() {
    cropper.zoomOut();
}



</script>
</body>
</html>
